<template>
	<view id="wrap">
		<custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list">
			<!-- #ifdef MP-WEIXIN -->
			<view class="item" v-for="(item,index) in data.list" :key="index" slot="slot{{index}}">
				<view class="title">{{item.title}}</view>
				<view class="desc">{{item.desc}}</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template v-slot:default="item">
				<view class="item">
					<view class="title">{{item.title}}</view>
					<view class="desc">{{item.desc}}</view>
				</view>
			</template>
			<!-- #endif -->
		</custom-waterfalls-flow>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				data: {
					list: [{
							image: 'https://via.placeholder.com/200x400.png/ff0000',
							title: '我是标题1',
							desc: '描述描述描述描述描述描述描述描述1'
						},
						{
							image: 'https://via.placeholder.com/200x200.png/2878ff',
							title: '我是标题2',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: 'https://via.placeholder.com/200x200.png/2878ff',
							title: '我是标题3',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: 'https://via.placeholder.com/200x200.png/2878ff',
							title: '我是标题4',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: 'https://via.placeholder.com/200x200.png/2878ff',
							title: '我是标题5',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: 'https://via.placeholder.com/200x200.png/2878ff',
							title: '我是标题6',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: 'https://via.placeholder.com/200x200.png/2878ff',
							title: '我是标题7',
							desc: '描述描述描述描述描述描述描述描述2'
						},
						{
							image: 'https://via.placeholder.com/200x200.png/2878ff',
							title: '我是标题8',
							desc: '描述描述描述描述描述描述描述描述2'
						}
					]
				}
			}
		},
		methods: {
			reset() {
				this.data.list = [{
					image: 'https://via.placeholder.com/200x500.png/ff0000',
					title: '我是标题1',
					desc: '描述描述描述描述描述描述描述描述1'
				}]
				this.$refs.waterfallsFlowRef.refresh();
			}
		}

	}
</script>
<style lang="scss" scoped>
	#wrap {
		// padding: 30rpx;
		padding: 20rpx;
		padding-bottom: var(--iphonex-fix-bottom);
		--iphonex-fix-bottom: env(safe-area-inset-bottom);
		.item {
			margin: 10rpx 0;
			.title {
				font-size: 28rpx;
			}
			.desc {
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
</style>